<!-- 吸顶轮播菜单导航 -->
<template>
	<view>

		<view class="topbar-title" :style="{background:isAddBg?'#ff6e36':'',height:titleHeight+menuToStatusHeight+'px'}">
			<view :style="{marginTop:topbarMarginTop+'px',lineHeight:topbarHeight+'px'}">{{isAddBg?'首页':''}}</view>
		</view>
		
		<view class="top-bar" :style="{backgroundImage:'url('+topbarbg+')'}"></view>
		<view :style="{top:lunboTop,height:500+'px'}" style="width: 750rpx;position: absolute;">
			<view class="logoWrap" style="">
				<image src="../../static/index/logo.png" mode="widthFix" class="logoIcon"/>
				<image src="../../static/index/button-tongzhi.png" mode="widthFix" class="tongzhiIcon" 
				@click="goPage(`/subpkg/noticeList/noticeList`)"/>
			</view>
			<view class="lunbo-Wrap" :style="{top:'130px'}">
				<view class="tozhi" @click="goPage('/subpkg/newsContent/newsContent',{pageName:'noticeList',id:noticeTopId})">
					<u-text color="#fff" :text="noticeTopTitle" lines="1" align="center"/>
				</view>
				<index-swiper :banners="banners" />
				
			</view>
				
		
		
		
		<index-nav/>
		<view class="content-wrap" style="margin-top:0px;">
			
		 <mescroll-body bottom="160" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback">
			<index-saishi :indexList="indexList" />
			</mescroll-body>
		</view>
		</view>	
		<tab-bar :value="0"></tab-bar>
	</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '@/js_sdk/mmmm-image-tools/index.js'
	import {mapActions} from 'vuex'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
				mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				isScrollable:false,
				topbarbg:'',//顶部背景
				titleHeight:0,//标题的高度
				topbarMarginTop:0,//标题到顶部的距离
				menuToStatusHeight:0,//胶囊与信息栏之间的距离
				topbarHeight:0,
				isAddBg:false,//标题是否增加背景
				lunboTop:'',
				banners: [],
				
				
				
				
				//通知标题
				noticeTopTitle:'',
				//通知id
				noticeTopId:0,
				
				/**赛事列表**/
				ssHeight:0,//滚动赛事高度
				indexList: [],
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:false, // 不自动加载
					page: {
						num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 2 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty:{
						tip: '~ 空空如也 ~', // 提示
					}
				
				},
			}
		},
		
		onPageScroll(e) {//监听页面滚动
			this.isAddBg=e.scrollTop>=this.titleHeight
		  },

		
		onLoad() {
				console.log(uni.$u.sys())
			
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();//胶囊信息
			this.topbarMarginTop=menuButtonInfo.top//胶囊到顶部的距离
			this.topbarHeight=menuButtonInfo.height//胶囊的高度
			this.menuToStatusHeight=menuButtonInfo.top-uni.$u.sys().statusBarHeight//胶囊与信息之间的距离
			this.titleHeight=(menuButtonInfo.height+this.menuToStatusHeight+uni.$u.sys().statusBarHeight)
			
			
			this.lunboTop=(this.topbarMarginTop+this.topbarHeight+5)+'px'
			this.ssHeight=uni.$u.sys().screenHeight-this.titleHeight

		
			/**顶部通知接口**/
			this.getTongzhiList({success:res=>{
				this.noticeTopTitle=res.data.data.noticeTitle
				this.noticeTopId=res.data.data.noticeId
			}}) 
			/*获取轮播图*/
			this.getBannerList({success:res=>{
				res.data.data.forEach((item,index)=>{
					if(index<5){
						this.banners.push(item)
					}
				})
				
			
			}})
			
			
			this.mescroll.resetUpScroll()
			
			 
			 pathToBase64('/static/index/topbarBg.png').then(base64 => {
			     this.topbarbg=base64
			   })
			  
			
		},
		
		
		
		mounted() {
			
		},
		methods: {
			...mapActions('m_index',['getTongzhiList','getBannerList','getMatchOverListAction']),
			
			//路由跳转
			goPage(url,obj){
				uni.$u.route(url,obj);
			},
			
			/*下拉刷新的回调 */
			downCallback() {
				this.mescroll.resetUpScroll()
			},
			
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				
				const params={
					pageSize:page.size,
					pageNum:page.num
				}
				this.getMatchOverListAction({data:params,success:res=>{
					let list=res.data.rows
					
					if(page.num == 1) this.indexList=[]
					this.indexList=this.indexList.concat(list)
					this.mescroll.endBySize(list.length, res.data.total)
				}})
				
			}
			
			
		}
	}
</script>

<style lang="scss">
	.topbar-title{text-align: center;color:#fff;position:fixed;top:0;left:0;width:750rpx;z-index:999;}
	.top-bar{width:750rpx;height:440px;background-size: 750rpx 403px;
	background-repeat: no-repeat;background-position: 50% 0%;overflow: hidden;
		
	}
	.logoWrap{box-sizing: border-box;padding:0;position: absolute;
	top:0;left:0;width:750rpx;z-index:5;
		image{position: absolute;}
		.logoIcon{width: 350px;top:10px;left:50%;transform: translateX(-50%);}
		.tongzhiIcon{width:35px;top:115px;right:40rpx;}
	}
	.lunbo-Wrap{box-sizing: border-box;background:#ff9547;height:245px;
	position: relative;width:720rpx;left:50%;transform: translateX(-50%); 
	border:1px solid #fdcdaa;border-radius: 11px;
		
		.tozhi{color:#fff;width: 600rpx;margin:30px auto 15px auto;}
	}

	.content-wrap{background-color: #f2f5fa;padding:0;margin-top:0px;overflow: hidden;}
	
	
	
</style>